<template lang="pug">
  .tabContent
    s-table(
      ref="table"
      :dataPops="tableData"
      :column="column"
      :loading="loading"
      :filterProps="{fields: searchField}"
      :queryPropsParams="{ classId }"
      @filterHandle="searchHandle"
    )
      template(slot="healthyStatus" slot-scope="text") {{text === 1 ? '不健康' : '健康'}}
      template(slot="checkStatus" slot-scope="text")
        div(style="display: flex;align-items: center; justify-content: center;")
          div(:class="getCheckStatus(text).class" style="margin-right: 6px;")
          span(:class="getCheckStatus(text).spClass") {{getCheckStatus(text).label}}
      template(slot="action" slot-scope="text, scope")
        el-link(type="primary" @click="modalHandle(scope.childrenId)") 详情
        el-link(v-if="scope.checkStatus === 3" @click="cancelRefuseCheckin(scope.childrenId)" type="danger") 撤销拒入
    detail(:visible.sync="modalObj.visible" :id="modalObj.id")
</template>
<script>
import { mapGetters } from 'vuex'
import { column, checkStatusList } from './config'
import { getClassesByArea } from '@/api/common'
import { getAttendanceByClass, cancelRefuseCheckinStatus } from '../../api'
import Detail from './detailDrawer'
import dayjs from 'dayjs'
export default {
  name: 'AttendanceTransfer',
  components: {
    Detail
  },
  data () {
    return {
      loading: false,
      tableData: [],
      column,
      classId: '',
      classes: [],
      date: dayjs().format('YYYY-MM-DD'),
      modalObj: {
        visible: false,
        id: ''
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchField () {
      const { classId } = this
      return [
        {
          key: 'classId',
          label: '班级名称',
          type: 'select',
          initialValue: classId,
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          },
          events: {
            change: val => this.classChange(val)
          }
        },
        {
          key: 'date',
          label: '日期',
          type: 'date',
          initialValue: dayjs().format('YYYY-MM-DD'),
          events: {
            change: val => this.dateChange(val)
          }
        }
      ]
    }
  },
  created () {
    this.getClassList()
  },
  methods: {
    getCheckStatus (val) {
      const value = val.toString() || ''
      if (!value) {
        return val
      }
      return checkStatusList.find(x => x.value === value)
    },
    // 获取列表
    getList () {
      this.loading = true
      const { classId, date } = this
      getAttendanceByClass({ classId, date }).then(res => {
        this.tableData = res[0] ? (res[0].childrenList || []) : []
      }).finally(() => {
        this.loading = false
      })
    },
    // 获取班级列表
    getClassList () {
      const { curArea } = this
      console.log(curArea)
      getClassesByArea({ areaId: curArea.areaId, category: 1 }).then(res => {
        this.classes = res || []
        console.log(this.classes)
        this.classChange(this.classes[0] ? this.classes[0].id : '')
      })
    },
    // 选择班级
    classChange (val) {
      this.classId = val
      this.getList()
    },
    dateChange (val) {
      console.log(val)
      this.date = dayjs(val).format('YYYY-MM-DD')
    },
    // 查询
    searchHandle () {
      this.getList()
    },
    // 查看详情
    modalHandle (id) {
      this.modalObj = {
        id,
        visible: true
      }
    },

    cancelRefuseCheckin (childrenId) {
      const { date } = this
      this.$confirm(`此操作将撤销拒绝入园状态, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelRefuseCheckinStatus({ childrenId, date }).then(res => {
          this.getList()
        })
      })
    }
  }
}
</script>
<style>
</style>
